<template>
  <view class="content">
    <view class="phoneText">
      <view class="">注销申请</view>
      <view class="">
        注销账号需认证身份
      </view>
    </view>
    <!-- 手机号 -->
    <view class="phone">
      <view class="v1">
        <text class="v1Text">手机号</text>
        <u--input type="number" v-model="mobile" border="none" clearable placeholder="输入新手机号" @change='change'>
        </u--input>
      </view>
      <u-line color="#E6E6E6"></u-line>
      <view class="v1">
        <text class="v1Text">验证码</text>

        <view class="vCode">
          <u--input type="number" v-model="newCode" border="none" clearable placeholder="输入验证码" @change='change'>
          </u--input>
          <button class="login_from_bot flex_shrink" plain v-show="show" @click="getCode">获取验证码</button>
          <button class="login_from_bot sending flex_shrink" plain v-show="!show">{{ count }}s后重新获取</button>
        </view>
      </view>
      <u-line color="#E6E6E6"></u-line>
    </view>

    <view class="bottom">
      <button v-if='!buttonShow' :disabled="confirming" :loading="confirming"
        color="#F5F5F5" style="color: #CCCCCC;font-size: 32rpx;font-weight: 500;border-radius: 32rpx;">确认注销</button>
      <button v-else @click="confirm" :disabled="confirming" :loading="confirming"
        color="#FF5900" style="color: #fff;font-size: 32rpx;font-weight: 500;border-radius: 32rpx;">确认注销</button>
    </view>

    <!-- 协议弹框 -->
    <u-popup :show="showXY" @close="showXY = false" mode="center" :round="10">
      <view class="">
        <view class="xieyiCenter">
          <view class="xieyiCenter_title">注销协议</view>

          <view class="xieyiCenterText">
            <view class="vv">在您申请注销炎华潮玩账号之前，请您认真阅读、理解并同意《炎华潮玩账号注销须知》。</view>
            <view class="vv">
              1、在此善意提醒您，注销炎华潮玩账号为不可恢复的操作，注销账号后您将无法再使用该账号或找回您通过该账号浏览、关注、添加、绑定的任何内容或信息（即使您使用相同的手机号码再次注册并使用炎华潮玩）。</view>
            <view class="vv">2、建议您在注销前自行备份本账号相关的所有信息，并请确认与本账号相关的所有服务、财产性权益等均已进行妥善处理。账号注销成功后，我们将删除您的个人信息，或对其进行匿名化处理。
            </view>
            <view class="vv">3、在您的账号注销期间，如果您的账号涉及争议纠纷，包括但不限于投诉、举报、诉讼、仲裁、国家有权机关调查等，您知晓并理解，炎华潮玩有权自行决定是否终止该账号的注销而无需另行得到您的同意。
            </view>
            <view class="vv">4、账号注销后，您将无法再使用该账号，也将无法找回该账号中及与该账号相关的任何内容或信息，包括但不限于： 　（1
              个人资料和历史信息，包括但不限于头像、用户名、发布内容、浏览记录、关注、收藏等； 　（2 您将无法登录、使用该账号，其他用户将无法继续通过该账号与您互动； 　（3
              您通过该账号使用、授权登录或绑定该账号后使用的炎华潮玩或第三方服务的相关记录将无法找回。 　（4 您理解并同意，炎华潮玩无法协助您重新恢复上述服务。</view>
            <view class="vv">5、注销该账号并不代表注销前该账号中的行为和相关责任得到豁免或减轻。</view>
          </view>
          <view class="know" @tap="showXY = false">我知道了</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import pageMixin from '@/mixins/pageMixin';
import { GetCode } from '@/api/login/login';
export default {
  mixins: [pageMixin],
  components: {},
  data () {
    return {
      //短信提示
      show: true,
      count: '',
      timer: null,
      mobile: '',
      newCode: '',
      confirming: false,
      buttonShow: false,
      showXY: true,
    };
  },
  computed: {},
  onLoad (options) { },
  methods: {
    //获得验证码
    getCode () {
      let that = this;
      var error = ''; // eslint-disable-line no-unused-vars
      if (this.mobile == '') {
        error = '请输入手机号';
      } else {
        //手机
        let reg = /^1[3-9][0-9]{9}$/;
        if (!reg.test(this.mobile)) {
          error = '手机号格式有误';
        }
      }
      if (error) {
        uni.showToast({
          title: error,
          icon: 'none',
          mask: false,
          duration: 2000
        });
        return;
      }
      GetCode({ phone: this.mobile }).then(res => {
        console.log(res)
        // uni.showToast({
        // 	title: '验证码已发送',
        // 	icon: 'success',
        // 	mask: false,
        // 	duration: 2000
        // });
        // this.timeRun();
      }).catch(err => {
        console.log(err)
      })

    },
    timeRun () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    change () {
      if (this.mobile.length > 0 && this.newCode.length > 0) {
        this.buttonShow = true
      } else {
        this.buttonShow = false
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  padding: 0 60rpx;
}
.phoneText {
  padding-top: 100rpx;
  view:nth-child(1) {
    height: 48rpx;
    font-size: 48rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 48rpx;
  }
  view:nth-child(2) {
    margin-top: 20rpx;
    height: 28rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    text {
      margin-left: 15rpx;
    }
  }
}
.login_from_bot {
  height: 64rpx;
  line-height: 60rpx;
  font-size: 15px;
  border: solid 0px $base-color;
  color: $base-color;
  background-color: transparent;
  padding-left: 27rpx;
  border-radius: 25px;
  background-color: #fff;
  // background-color: rgba(132, 111, 253, 0.1);
  border:1px solid #FF5900;
  text-align: center;
}
.phone {
  padding-top: 100rpx;
  .v1 {
    display: flex;
    justify-content: left;
    align-items: center;

    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 100rpx;
    .v1Text {
      margin-right: 30rpx;
    }
    .vCode {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.bottom {
  padding-top: 100rpx;
}
.xieyiCenter {
  width: 622rpx;
  padding: 0 30rpx 40rpx 30rpx;
  background: #ffffff;
  border-radius: 30px;

  .xieyiCenter_title {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 36rpx;
    line-height: 36px;
    text-align: center;
    padding: 30rpx;
  }
  .xieyiCenterText {
    max-height: 60vh;
    overflow: auto;
  }

  .vv {
    font-size: 28rpx;
    color: #1a1a1a;
    margin-bottom: 30rpx;
  }

  .know {
    margin: 0 auto;
    margin-top: 25rpx;
    width: 368rpx;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 39px;
    text-align: center;
    line-height: 80rpx;
    font-weight: 500;
    color: #FF5900;
  }
}
</style>
